import 'package:cult/function/utils/my_common.dart';
import 'package:flutter/material.dart';
import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';
import 'plant_encyclopedia_controller.dart';
import '../../../function/model/plant_encyclopedia_model.dart';

/// 植物百科页面
/// 使用GetX进行页面逻辑分离
class PlantEncyclopediaPage extends GetView<PlantEncyclopediaController> {
  const PlantEncyclopediaPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/home_bg.png'),
            fit: BoxFit.fill,
          ),
        ),
        child: SafeArea(
          bottom: false,
          child: Column(
            children: [
              // 顶部导航栏
              _buildTopNavigation(context),

              // 植物列表
              Expanded(child: _buildPlantList(context)),
            ],
          ),
        ),
      ),
    );
  }

  /// 构建顶部导航栏
  Widget _buildTopNavigation(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 0.h),
      child: Row(
        children: [
          // 返回按钮
          Icon(
            Icons.arrow_back_ios_new,
            size: 20.sp,
            color: MyCommonUtils.white,
          ).padding(all: 10.w).inkWell(onTap: () => Get.back()),

          SizedBox(width: 16.w),

          // 标题
          Expanded(
            child: Text(
              'Plant Science',
              style: TextStyle(
                fontSize: 24.sp,
                fontFamily:
                    GoogleFonts.berkshireSwash(
                      fontWeight: FontWeight.w400,
                    ).fontFamily,
                color: MyCommonUtils.white,
              ),
              textAlign: TextAlign.center,
            ),
          ),

          // 占位空间，保持标题居中
          SizedBox(width: 56.w),
        ],
      ),
    );
  }

  /// 构建植物列表
  Widget _buildPlantList(BuildContext context) {
    return Obx(() {
      final plants = controller.plantEncyclopediaState.allPlants;

      if (plants.isEmpty) {
        return Center(
          child: Text(
            'No plants available',
            style: TextStyle(fontSize: 16.sp, color: MyCommonUtils.white),
            textAlign: TextAlign.center,
          ),
        );
      }

      return ListView.builder(
        padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
        itemCount: plants.length,
        itemBuilder: (context, index) {
          final plant = plants[index];
          return _buildPlantItem(context, plant);
        },
      );
    });
  }

  /// 构建植物列表项
  Widget _buildPlantItem(BuildContext context, PlantEncyclopediaModel plant) {
    return Container(
      margin: EdgeInsets.only(bottom: 16.h),
      child: AspectRatio(
        aspectRatio: 355 / 210,
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12.r),
            image: DecorationImage(
              image: AssetImage(plant.coverImage),
              fit: BoxFit.fill,
            ),
          ),
        ),
      ),
    ).inkWell(
      onTap: () {
        // 跳转到植物详情页面
        Get.toNamed('/plant-detail', parameters: {'plantId': plant.id});
      },
    );
  }
}
